<template>
  <div class="page-tabbar">
    <ul class="nav maxWidth flex-row  navbar-nav">
      <li v-for="(item,index) in data" >
        <a href="javascript:void(0);" :href="item.url" @click=""  :class="{'active':activeIndex==index}">
          {{item.title}}
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    props:{
      activeIndex:{
        type: Number,
        default :0
      }
    },
    data(){
      return {
        data:[
          {title:'首页',url:`${cdnBase}/html/index.html`},
          {title:'推广活动',url:`${cdnBase}/html/activities.html`},
          {title:'搜惠券',url:`${cdnBase}/html/souhuiquan.html`},
          {title:'今日疯抢榜',url:`${cdnBase}/html/jiujiubaoyou.html`}
        ]
      }
    },
    mounted(){

    },
    methods:{

    }
  }

</script>
<style lang="less" scoped>
  .page-tabbar{
    width: 100%;
    height: 38px;
    background: #333;
    .nav{
      &.navbar-nav{

        li{
          a{
            display: inline-block;
            position: relative;
            width: 115px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            color: #f2f2f2;
            font-size: 14px;
            &.active{
              background:@themeColor;

            }
          }
        }
      }
    }
  }
</style>

